<template>
  <div class="container">
    <baidu-map
      class="bm-view"
      mapType="BMAP_SATELLITE_MAP"
      :scroll-wheel-zoom="true"
      @ready="mapReady"
      @mousemove="syncPolyline"
      @click="paintPolyline"
      @rightclick="newPolyline"
    >
      <bm-control
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        :offset="{ width: 10, height: 15 }"
      >
        <button @click="regionalLevel('#3a98ff')">一级风险</button>
        <button @click="regionalLevel('#f0d80e')">二级风险</button>
        <button @click="regionalLevel('#fc6910')">三级风险</button>
        <button @click="regionalLevel('#fc1510')">四级风险</button>
        <button @click="polyline.editing = !polyline.editing">
          {{ polyline.editing ? "停止绘制" : "开始绘制" }}
        </button>
        <button @click="reDraw">重新绘制</button>
        <button @click="saveDraw">保存绘制</button>
      </bm-control>
      <bm-polygon
        :path="path"
        :stroke-color="path[0] && path[0].color"
        :fill-color="path[0] && path[0].color"
        :fill-opacity="0.2"
        v-for="(path, index) of polyline.paths"
        :key="index"
      />
    </baidu-map>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span><b style="background: #3a98ff"></b> 一级风险</span>
          </div>
          <div v-for="item in anegrade" :key="item.sensorNumber">
            <b class="iconfont icon-weixing-copy" style="color: #3a98ff"></b>
            {{ item.sensorName }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span><b style="background: #f0d80e"></b> 二级风险</span>
          </div>
          <div v-for="item in twograde" :key="item.sensorNumber">
            <b class="iconfont icon-weixing-copy" style="color: #f0d80e"></b>
            {{ item.sensorName }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span><b style="background: #fc6910"></b> 三级风险</span>
          </div>
          <div v-for="item in threegrade" :key="item.sensorNumber">
            <b class="iconfont icon-weixing-copy" style="color: #fc6910"></b>
            {{ item.sensorName }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span><b style="background: #fc1510"></b> 四级风险</span>
          </div>
          <div v-for="item in fourgrade" :key="item.sensorNumber">
            <b class="iconfont icon-weixing-copy" style="color: #fc1510"></b>
            {{ item.sensorName }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Axios from "axios";
import * as serviceApi from "../../../../common/service.config";
export default {
  name: "RegionalAnalysis",
  data() {
    return {
      polyline: {
        editing: false,
        paths: [],
        strokeColor: "#3a98ff",
      },
      anegrade: [],
      twograde: [],
      threegrade: [],
      fourgrade: [],
    };
  },
  methods: {
    //显示出各风险等级下的设备名称
    async getItemls() {
       await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{}","serviceCode":"listRiskSensorProcessor","timestamp":"","uuid":""}`,
      }).then((res) => {
        // console.log(res)
        this.anegrade = res.data.parameter.anoLevelList;
        this.twograde = res.data.parameter.twoLevelList;
        this.threegrade = res.data.parameter.threeLevelList;
        this.fourgrade = res.data.parameter.fourLevelList;
      });
    },
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      let point = new BMap.Point(101.76646069, 36.61069831);
      map.centerAndZoom(point, 14);
    },
    regionalLevel(color) {
      this.polyline.strokeColor = color;
    },
    reDraw() {
      let paths = this.polyline.paths;
      if (paths[paths.length - 1]) {
        if (paths[paths.length - 1].length == 0) paths.pop();
      }
      paths.pop();
    },
    saveDraw() {
      localStorage.setItem(
        "paths",
        JSON.stringify({ paths: this.polyline.paths })
      );
    },
    syncPolyline(e) {
      e.point.color = this.polyline.strokeColor;
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        return;
      }
      const path = paths[paths.length - 1];
      if (!path.length) {
        return;
      }
      if (path.length === 1) {
        path.push(e.point);
      }
      this.$set(path, path.length - 1, e.point);
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        paths.push([]);
      }
      const path = paths[paths.length - 1];
      path.pop();
      if (path.length) {
        paths.push([]);
      }
    },
    paintPolyline(e) {
      e.point.color = this.polyline.strokeColor;
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      !paths.length && paths.push([]);
      paths[paths.length - 1].push(e.point);
    },
  },
  created() {
    if (JSON.parse(localStorage.getItem("paths"))) {
      this.polyline.paths = JSON.parse(localStorage.getItem("paths")).paths;
    }
    this.getItemls();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 86vh;
  .bm-view {
    width: 100%;
    height: 100%;
    /deep/ .anchorBL {
      display: none;
      visibility: hidden;
    }
  }
  .el-row {
    width: 40%;
    position: absolute;
    top: 2%;
    .el-card {
      background-color: rgba(255, 255, 255, 0.5);
      border: none;
      /deep/ .el-card__header {
        padding: 10px 20px;
        background-color: rgba(67, 131, 214, 0.5);
        border-bottom: none;
        b {
          display: inline-block;
          width: 20px;
          height: 10px;
          background-color: red;
        }
      }
      /deep/ .el-card__body {
        font-size: 15px;
        padding: 15px 20px;
        div {
          line-height: 24px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
